//Add a layer with features that will be projected on the image
function addProjectionLayer() {
//Line feature
var line = new ol.Feature(new ol.geom.LineString([[2120056.819353365, 6025119.792111267], [2120064.6571345855, 6025119.41888359]]));
var point = new ol.Feature(new ol.geom.Point([2120050.997001601, 6025134.1240540715]));
var features = [line, point1, point2];
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.4)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1)',
width: 4
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 1)'
})
})
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: style,
name: 'Projections Layer'
});
map.addLayer(vectorLayer);
}
//Get map projections that will pe drawn on the image.
ImajnetPlugin.getProjectionCandidates = function(position) {
var result = jQuery.Deferred();
//Imajnet function that will get the constraint from which the features will be projected
var constraintGeometry = ImageControler.currentPhotogrammetry.getProjectionConstraint(position);
//{arse coordinates
for(var i = 0; i < constraintGeometry.length; i++) {
constraintGeometry[i] = ol.proj.transform([constraintGeometry[i].x, constraintGeometry[i].y], wgs84, webMercator);
}
var triangle = new ol.Feature(new ol.geom.Polygon([constraintGeometry]));
// Build an array with all the features
var features = new Array();
features.push(getLayerByName('Projections Layer').getSource().getFeatures());
var format = new ol.format.GeoJSON();
var intersectedFeatures = new Array();
//Loop over the features and check if they are in the constraint geometry
for(var i = 0; i < features.length; i++) {
for(var j = 0; j < features[i].length; j++) {
//An external library that checks for intersection between the feature and the constraint
var intersection = turf.intersect(format.writeFeatureObject(triangle), format.writeFeatureObject(features[i][j]));
//If an intersection is found add the feature to objects that need to be projected
if(intersection) {
var geometry = features[i][j].clone().getGeometry();
geometry.transform(webMercator, wgs84);
var coordinates = geometry.getCoordinates();
var type = geometry.getType();
//The objects that will be projected must have a feature, a geometry(coordinates) and a style
if(type === 'Point') {
intersectedFeatures.push({
feature: features[i][j],
geometry: new Array({
lon: coordinates[0],
lat: coordinates[1]
}),
style: getStyleObjectForProjection(features[i][j])
});
} else if(type === 'LineString') {
var pointsArray = new Array();
for(var k = 0; k < coordinates.length; k++) {
pointsArray.push({
lon: coordinates[k][0],
lat: coordinates[k][1]
})
}
intersectedFeatures.push({
feature: features[i][j],
geometry: pointsArray,
style: getStyleObjectForProjection(features[i][j])
})
} else if(type === 'Polygon') {
var pointsArray = new Array();
coordinatesPolygon = coordinates[0];
for(var k = 0; k < coordinatesPolygon.length; k++) {
pointsArray.push({
lon: coordinatesPolygon[k][0],
lat: coordinatesPolygon[k][1]
})
}
intersectedFeatures.push({
feature: features[i][j],
geometry: pointsArray,
style: getStyleObjectForProjection(features[i][j])
})
}
}
}
}
result.resolve(intersectedFeatures);
return result.promise();
};
//Function that will return the feature's style in to imajnet format so that it can be drawn in to the image
function getStyleObjectForProjection(feature) {
var featureStyles = getStyleFromFeature(feature);
var styleProjections = new Array();
var type = feature.getGeometry().getType();
var fill = null;
var stroke = null;
jQuery.each(featureStyles, function(key, value) {
if(type != "Point") {
fill = value.getFill();
stroke = value.getStroke();
styleProjections.push({
strokeColor: stroke ? stroke.getColor() : '#000000',
strokeLinecap: stroke.getLineCap(),
strokeWidth: stroke ? stroke.getWidth() : 2,
fill: fill ? fill.getColor() : null
})
} else if(type === 'Point') {
var style = {}
image = value.getImage();
if(image instanceof ol.style.Icon) {
style.externalGraphic = image.getSrc();
} else {
fill = image.getFill();
stroke = image.getStroke();
var radius = image.getRadius();
}
if(stroke) {
style.strokeColor = stroke.getColor();
style.strokeWidth = stroke.getWidth();
}
if(fill) {
style.fillColor = fill.getColor();
style.fill = true;
}
if(image instanceof ol.style.RegularShape) {
var points = image.getPoints();
var radius2 = image.getRadius2();
var angle = image.getAngle();
if(radius2 != radius) {
points = points / 2;
}
if(points == 4) {
if(radius2 == 0) {
style.graphicName = 'cross';
} else {
style.graphicName = 'square';
}
} else if(points == 3) {
style.graphicName = 'triangle';
}
}
style.pointRadius = radius;
styleProjections.push(style)
}
});
return styleProjections;
}
//Helper functions to highlight the projections
ImajnetPlugin.onFeatureMouseover = function(featureWrapper) {
ImageControler.currentGraphic.svg.forEach(function(element) {
var currentLineFeatureData = element.data('featureData');
if(currentLineFeatureData && currentLineFeatureData.featureId == featureWrapper.id) {
element.attr({
opacity: 0.6
});
}
});
var feature = featureWrapper.feature;
highlightFeature(feature);
};
ImajnetPlugin.onFeatureMouseout = function(featureWrapper) {
ImageControler.currentGraphic.svg.forEach(function(element) {
var currentLineFeatureData = element.data('featureData');
if(currentLineFeatureData && currentLineFeatureData.featureId == featureWrapper.id) {
element.attr({
opacity: 1
});
}
});
var feature = featureWrapper.feature;
removeSelect(feature);
};
ImajnetPlugin.onItemMouseOver = function(event, hoveredElement, featureId) {
ImajnetUI.highlightContainer(hoveredElement);
highlightFeature(ImajnetMap.getFeatureWrapperById(featureId).getFeature());
};
ImajnetPlugin.onItemMouseOut = function(element, featureId) {
ImajnetUI.unHighlightContainer(element);
ImageControler.currentGraphic.featureIdToHighlight = '';
removeSelect(ImajnetMap.getFeatureWrapperById(featureId).getFeature());
};
function removeSelect(feature) {
if(!feature.get('isSelected')) {
return;
}
feature.getStyle().pop();
feature.setStyle(feature.getStyle());
feature.set('isSelected', false)
}
function highlightFeature(feature) {
if(feature.get('isSelected')) {
return;
}
var type = feature.getGeometry().getType();
var style = getStyleFromFeature(feature);
style.push(selectStyle(type));
feature.setStyle(style);
feature.set('isSelected', true);
}
function selectStyle(type) {
if(type == 'Point') {
return new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: 'rgba(52, 152, 219, 0.5)'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
})
}),
zIndex: 999
});
} else if(type == 'LineString') {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(52, 152, 219, 0.5)',
width: 16
}),
zIndex: 999
});
} else if(type == 'Polygon') {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(52, 152, 219, 0.5)'
}),
zIndex: 999
});
}
}
Imajnet JavaScript SDK